<template>
    <div class="big">

        <div class="center">
            <div :class="index == '1' ? '' : 'active1'">
                <div class="tex">
                    <h2>手机号登录</h2>
                </div>
                <a-form ref="formRef" :model="formState" name="dynamic_rule" v-bind="formItemLayout">
                    <a-form-item label="" name="mobile"
                        :rules="[{ required: true, message: 'Please input your username!' }]">
                        <a-input v-model:value="formState.mobile" />
                    </a-form-item>

                    <a-form-item label="" name="password"
                        :rules="[{ required: formState.checkNick, message: 'Please input your nickname!' }]">
                        <a-input v-model:value="formState.password" type="password" />
                    </a-form-item>

                    <a-form-item name="checkNick" v-bind="formTailLayout">
                        <a-checkbox v-model:checked="formState.checkNick">用户平台使用协议</a-checkbox>
                    </a-form-item>

                    <a-form-item v-bind="formTailLayout">
                        <a-button type="primary" @click="onCheck" style="width: 100px;">登录</a-button>
                    </a-form-item>
                </a-form>
            </div>
            <div :class="index == '2' ? '' : 'active1'">
                <div class="tex">
                    <h2>二维码登录</h2>
                </div>
                <a-space direction="vertical" align="center">
                    <a-qrcode :value="text" />
                    <!-- <a-input v-model:value="text" placeholder="-" :maxlength="60" /> -->
                </a-space>
                <!-- <a-form ref="formRef" :model="formState" name="dynamic_rule" v-bind="formItemLayout">
                    <a-form-item label="" name="username"
                        :rules="[{ required: true, message: 'Please input your username!' }]">
                        <a-input v-model:value="formState.username" />
                    </a-form-item>

                    <a-form-item label="" name="password"
                        :rules="[{ required: formState.checkNick, message: 'Please input your nickname!' }]">
                        <a-input v-model:value="formState.password" type="password" />
                    </a-form-item>

                    <a-form-item name="checkNick" v-bind="formTailLayout">
                        <a-checkbox v-model:checked="formState.checkNick">用户平台使用协议</a-checkbox>
                    </a-form-item>

                    <a-form-item v-bind="formTailLayout">
                        <a-button type="primary" @click="onCheck" style="width: 100px;">登录</a-button>
                    </a-form-item>
                </a-form> -->
            </div>
            <div class="bt">
                <button @click="go">手机号登录</button>
                <button @click="go1">二维码登录</button>
            </div>
        </div>


    </div>
</template>

<script setup lang="ts">

import { reactive, ref, watch, onMounted } from 'vue';
import type { FormInstance } from 'ant-design-vue';
import { useRouter } from 'vue-router';

// 二维码

import { getRwm, Logon } from '../api/axios.js'
const text = ref('https://www.antdv.com/')

const get = async () => {
    let res = await getRwm()
    console.log(res.data);

}
onMounted(() => {

})

// tab切换
let index = ref('1')
const go = () => {
    // console.log(1111);

    index.value = '1'
    console.log(index.value);

}
const go1 = () => {
    // console.log(2222);

    index.value = '2'
    console.log(index.value);
    get()
}
interface FormState {
    mobile: string;
    password: string;
    checkNick: boolean;
}
const formRef = ref<FormInstance>();
const formState = reactive<FormState>({
    mobile: '',
    password: '',
    checkNick: false,
});
watch(
    () => formState.checkNick,
    () => {
        formRef.value.validateFields(['nickname']);
    },
    { flush: 'post' },
);
let router = useRouter()
const onCheck = async () => {
    // try {
    //     const values = await formRef.value.validateFields();
    //     console.log('Success:', values);
    // } catch (errorInfo) {
    //     console.log('Failed:', errorInfo);
    // }
    let obj = {
        mobile: formState.mobile,
        password: formState.password
    }
    let res = await Logon(obj)

    if (res.data.success) {
        console.log(res.data.data);
        localStorage.setItem('token', res.data.data)
        router.push('/')
    }

};
const formItemLayout = {
    labelCol: { span: 12 },
    wrapperCol: { span: 12 },
};
const formTailLayout = {
    labelCol: { span: 12 },
    wrapperCol: { span: 12 },
};
</script>

<style scoped>
.big {
    width: 100%;
    height: 804px;
    display: flex;
    background-image: url(../assets/logo.svg) no-repeat center;
    flex-direction: column;
    background-size: cover;
    justify-content: center;
    align-items: center;
    /* margin: 0; */
}

.center {
    /* margin-top: 150px; */
    width: 400px;
    height: 300px;
    /* display: flex; */

}

.bt button {
    background-color: white;
    border: 1px solid rgb(198, 197, 197);
    margin: 10px;
}

.active {
    display: block;
}

.active1 {
    display: none;
}
.tex{
    margin-bottom: 40px;
}
</style>